<template>
  <div>
    <!-- 增加二级分类 -->
    <el-button type="success" icon="el-icon-plus" @click="addLevel2Handler()">
      增加二级分类
    </el-button>

    <!-- 外层，迭代的是二级 -->
    <draggable v-model="level23data" @end="sortLevel2Handler($event)">
      <div
        v-for="item in level23data"
        :key="item.id"
        class="level2div"
        :data-id="item.id"
      >
        <div>
          <!-- 二级分类的名字 -->
          <b>
            {{ item.text }}
          </b>
          <!-- 垃圾桶小图标 -->
          <el-popconfirm
            title="确定要删除么？"
            @confirm="delLevel2Handler(item.id)"
          >
            <el-button
              slot="reference"
              type="default"
              icon="el-icon-delete"
              circle
              size="mini"
            ></el-button>
          </el-popconfirm>

          <!-- 铅笔小图标 -->
          <el-button
            style="margin-left: 10px"
            type="default"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="editLevel2Handler(item)"
          ></el-button>

          <!-- 加号小图标 -->
          <el-button
            style="margin-left: 10px"
            type="default"
            icon="el-icon-plus"
            circle
            size="mini"
            @click="addLevel3Handler(item)"
          ></el-button>
        </div>

        <!-- 内层，迭代的是三级。vue-draggable这个插件规定，group名称相同的大组，里面的小部件可以夸大组拖拽。 -->
        <draggable
          v-model="item.children"
          group="level3"
          @end="sortLevel3Handler($event)"
          :data-id="item.id"
        >
          <span
            v-for="_item in item.children"
            :key="_item.id"
            class="level3span"
            :data-id="_item.id"
            @click="spanClickHandler(item.id, _item.id, _item.text)"
          >
            {{ _item.text }}

            <!-- 删除角标 -->
            <em @click.stop="delLevel3Handler(item.id, _item.id)">×</em>
          </span>
        </draggable>
      </div>
    </draggable>

    <!-- 内部的弹出层，用于增加二级分类、给二级分类改名 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogLevel2Visible"
      width="30%"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>请输入二级分类的名字：</div>
      <div>
        <el-input v-model="dialogLevel2InputValue"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogLevel2Visible = false">取 消</el-button>
        <el-button type="primary" @click="level2OkHandler()"> 确 定 </el-button>
      </span>
    </el-dialog>

    <!-- 内部的弹出层，用于增加三级分类、给三级分类改名 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogLevel3Visible"
      width="30%"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div>请输入三级分类的名字：</div>
      <div>
        <el-input v-model="dialogLevel3InputValue"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogLevel3Visible = false">取 消</el-button>
        <el-button type="primary" @click="level3OkHandler()"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getLevel23,
  sortLevel2,
  sortLevel3,
  delLevel2,
  addLevel2,
  modifyLevel2,
  delLevel3,
  addLevel3,
  modifyLevel3,
} from "@/api/category.js";

import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  props: ["parentId"],
  created() {
    this.loadData();
  },
  data() {
    return {
      // 服务器上请求回来的数组
      level23data: [],
      dialogLevel2Visible: false,
      dialogLevel3Visible: false,
      dialogLevel2InputValue: "",
      dialogLevel3InputValue: "",
      // 如果是增加是-1，如果是修改就是修改这个二级分类的id。
      nowModifyLevel2: -1,
      // 如果是增加是-1，如果是修改就是修改这个三级分类的id。
      nowModifyLevel3: -1,
      // 当前正在操作的三级分类，所属的二级分类
      currentLv2Id: "",
    };
  },
  methods: {
    async loadData() {
      const data = await getLevel23(this.parentId);
      this.level23data = data;
    },
    // 拖拽二级分类结束，发出Ajax请求，告诉服务器
    async sortLevel2Handler(e) {
      // level1id 欲改变位置的二级分类所属的一级分类id
      let level1id = this.parentId;
      // level2id 欲改变位置的二级分类的id
      let level2id = e.item.dataset.id;
      // oldindex 欲改变位置的二级分类原本下标位置
      let oldindex = e.oldIndex;
      // newindex 欲改变位置的二级分类新的下标位置
      let newindex = e.newIndex;

      const data = await sortLevel2({ level1id, level2id, oldindex, newindex });

      if (data.info == "修改二级排序成功") {
        this.$message.success("修改二级排序成功");
      } else {
        this.$message.error("修改二级排序失败，请联系管理员");
      }
    },
    async sortLevel3Handler(e) {
      // 一级分类id
      let level1id = this.parentId;
      // 要拖拽的这项，原本的下标
      let oldindex = e.oldIndex;
      // 要拖拽的这项，新的下标
      let newindex = e.newIndex;
      // 要拖拽的这项的id，实际上就是我们写的data-id。
      let level3id = e.item.dataset.id;
      // 目标大盒子的id
      let tolevel2id = e.to.dataset.id;
      // 原本大盒子的id
      let fromlevel2id = e.from.dataset.id;

      const data = await sortLevel3({
        level1id,
        oldindex,
        newindex,
        level3id,
        tolevel2id,
        fromlevel2id,
      });

      if (data.info == "修改三级排序成功") {
        this.$message.success("修改三级排序成功");
      } else {
        this.$message.error("修改三级排序失败，请联系管理员");
      }
    },
    async delLevel2Handler(level2id) {
      const data = await delLevel2({
        parentid: this.parentId,
        level2id,
      });
      if (data.info == "删除二级分类成功") {
        this.$message.success("删除二级分类成功");
      } else {
        this.$message.error("删除二级分类失败");
      }

      this.loadData();
    },
    // 绿色按钮“增加二级分类”
    addLevel2Handler() {
      // -1表示增加
      this.nowModifyLevel2 = -1;
      this.dialogLevel2InputValue = "";
      this.dialogLevel2Visible = true;
    },
    // 增加二级（修改二级名字）对话框确定按钮
    async level2OkHandler() {
      // 判断当前是在干什么，是增加、还是修改
      if (this.nowModifyLevel2 == -1) {
        const data = await addLevel2({
          parentid: this.parentId,
          text: this.dialogLevel2InputValue,
        });

        if (data.info == "增加二级分类成功") {
          this.$message.success("增加二级分类成功");
        } else {
          this.$message.error("增加二级分类失败");
        }
      } else {
        const data = await modifyLevel2({
          parentid: this.parentId,
          level2id: this.nowModifyLevel2,
          text: this.dialogLevel2InputValue,
        });

        if (data.info == "修改成功") {
          this.$message.success("修改二级分类成功");
        } else {
          this.$message.error("修改二级分类失败");
        }
      }

      this.dialogLevel2Visible = false;
      this.loadData();
    },
    // 二级分类小铅笔
    editLevel2Handler(item) {
      // 第一，改变一框两用的标量
      this.nowModifyLevel2 = item.id;
      // 第二，让对话框显示
      this.dialogLevel2Visible = true;
      // 第二，让对话框中的输入框的内容变为当前值
      this.dialogLevel2InputValue = item.text;
    },
    async delLevel3Handler(level2id, level3id) {
      const data = await delLevel3({
        level1id: this.parentId,
        level2id,
        level3id,
      });
      if (data.info == "删除三级分类成功") {
        this.$message.success("删除三级分类成功");
      } else {
        this.$message.error("删除三级分类失败");
      }
      this.loadData();
    },
    // 圆形加号，添加三级分类
    addLevel3Handler(item) {
      this.nowModifyLevel3 = -1;
      this.dialogLevel3Visible = true;
      this.dialogLevel3InputValue = "";
      // 这个值是非常关键的，表示我们要记录一下，三级分类要添加到哪个二级分类中
      this.currentLv2Id = item.id;
    },
    // 点击span，修改三级分类名称
    spanClickHandler(level2id, level3id, text) {
      this.nowModifyLevel3 = level3id;
      this.dialogLevel3Visible = true;
      this.dialogLevel3InputValue = text;
      // 这个值是非常关键的，表示我们要记录一下，要改名的这个三级分类是哪个二级分类的
      this.currentLv2Id = level2id;
    },
    // 添加、修改三级分类弹出层的确定按钮
    async level3OkHandler() {
      if (this.nowModifyLevel3 == -1) {
        const data = await addLevel3({
          level1id: this.parentId,
          level2id: this.currentLv2Id,
          text: this.dialogLevel3InputValue,
        });
        if (data.info == "增加三级分类成功") {
          this.$message.success("增加三级分类成功");
        } else {
          this.$message.error("增加三级分类失败");
        }
      } else {
        const data = await modifyLevel3({
          level1id: this.parentId,
          level2id: this.currentLv2Id,
          level3id: this.nowModifyLevel3,
          text: this.dialogLevel3InputValue,
        });
        if (data.info == "修改成功") {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      }

      this.loadData();
      this.dialogLevel3Visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.level2div {
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;

  .level3span {
    float: left;
    padding: 4px 6px;
    border: 1px solid rgb(136, 136, 136);
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    em {
      position: absolute;
      width: 15px;
      height: 15px;
      background-color: rgb(248, 101, 101);
      border-radius: 50%;
      right: -6px;
      top: -6px;
      text-align: center;
      line-height: 15px;
      color: white;
      font-size: 14px;
      font-family: Arial;
      cursor: pointer;
    }
  }

  b {
    font-size: 16px;
    margin-right: 20px;
    color: black;
  }
}
</style>